<template>
    <el-dialog
            :class="`limit-${limitClass}`"
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogState"
            :width="width"
            :append-to-body="appendToBody"
            :fullscreen="fullScreen"
            :destroy-on-close="destroyOnClose"
            :modal-append-to-body="modalAppendToBody"
            :modal="modal"
            :before-close="beforeClose"
            @open="open"
            @opened="opened"
            @close="close"
            @closed="closed"
            v-drag:down.d="isDrag">
       <slot></slot>
        <div slot="footer">
            <slot name="footer"></slot>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "dcimDialog",
        props: {
            isDrag: {
                type: Boolean,
                default: true
            },
            destroyOnClose: {
                type: Boolean,
                default: false
            },
            modalAppendToBody: {
                type: Boolean,
                default: true
            },
            modal: {
                type: Boolean,
                default: true
            },
            fullScreen: {
                type: Boolean,
                default: false
            },
            title: String,
            visible: {
                type: Boolean,
                default: false
            },
            width: {
                type: String,
                default: '20%'
            },
            appendToBody: {
                type: Boolean,
                default: false
            },
            beforeClose: Function,
        },
        watch: {
            visible: function (val) {

                this.dialogState = val

                if(val) this.limitClass = this.randomSeries()

            },
            dialogState: function (val) {
                if (!val) {

                    const currentEle = $(`.limit-${this.limitClass} .el-dialog`)

                    const styleObj = currentEle.attr('style')

                    const stringArr = styleObj.split(';')

                    const removeTop = this.filterStyle(stringArr, 'top')

                    const removeLeft = this.filterStyle(removeTop, 'left')

                    currentEle.attr('style', removeLeft.join(';'))

                }
            }
        },
        data() {
            return {
                dialogState: false,
                limitClass: ''
            }
        },
        methods: {
            /**
             *
             * 关闭弹窗重置样式
             *
             */
            filterStyle(arr, type) {

                for (let i = 0; i < arr.length; i++) {

                    const item = arr[i]

                    if (item.includes(type) && !item.includes('margin')) arr.splice(i, 1)

                }

                return arr

            },
            /**
             * 随机数
             */
            randomSeries() {
                return Math.floor((Math.random()*100)+1)
            },
            closed() {
                this.dialogState = false
                this.$emit('closed')
                this.$emit('update:visible', false)
            },
            close() {
                this.dialogState = false
                this.$emit('close')
                this.$emit('update:visible', false)
            },
            opened() {
                this.$emit('opened')
            },
            open() {

                this.$emit('open')

            }
        },
    }
</script>

<style scoped lang="stylus">
    >>>.el-dialog{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
    }

</style>